<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>
<script id="ColorVertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    uniform float u_PointSize;
    uniform mat4 u_ModelM4;
    uniform mat4 u_PvM4;
    void main(){
        gl_Position = u_PvM4 * u_ModelM4 * a_Position;
        gl_PointSize = u_PointSize;
    }
</script>
<script id="ColorFragmentShader" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec4 u_Color;
    void main(){
        gl_FragColor = u_Color;
    }
</script>
<script type="module">
    import { Matrix4, Vector3, Color, OrthographicCamera, PerspectiveCamera, Spherical, Plane, Ray } from '../js/three.module.js';
    import { CreateProgram, imgPromise } from '../js/Utils.js';
    import lib from '../js/ThreeLib.js';
    import CameraController from '../js/CameraController.js'
    import Poly from '../js/Poly4.js'

    import Geo from '../js/Poly/Geo.js'
    import Mat from '../js/Poly/Mat.js'
    import Obj3D from '../js/Poly/Obj3D.js'
    import Scene from '../js/Poly/Scene.js'



    //#region gl
    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight - 4;

    const gl = canvas.getContext("webgl", { antialias: true, });

    // gl.enable(gl.DEPTH_TEST);//开始背景遮挡会频闪
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    // gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);//去图片描边
    //#endregion


    let program = CreateProgram(gl,
        document.querySelector('#ColorVertexShader').innerText,
        document.querySelector('#ColorFragmentShader').innerText);


    const scene = new Scene({ gl: gl });

    const pvM4 = new Matrix4();
    const modelM4 = new Matrix4();

    const camera = new PerspectiveCamera(45, canvas.width / canvas.height, 1, 20);
    const cameraController = new CameraController({
        canvas: canvas,
        camera: camera,
        pvMatrix: pvM4,
        rendEvent: draw,
        eye: new Vector3(0, 0, 5),
    });

    const nodeLength = 0.5;
    const nodeArr = [
        -nodeLength, nodeLength,
        -nodeLength, -nodeLength,
        nodeLength, -nodeLength,
        nodeLength, nodeLength,
    ];

    const elementArr = [
        0, 1, 2,
        0, 2, 3,
    ];

    //三角形
    let [a, b, c] = [
        new Vector3(-0.6, 0, -0.4),
        new Vector3(0.6, -0, -0.4),
        new Vector3(0, -0, 0.4),
    ];
    // let [a, b, c] = [
    //     new Vector3(-0.6, 0.6, -0.4),
    //     new Vector3(0, 0.6, 0.4),
    //     new Vector3(0.6, 0.6, -0.4),
    // ];
    // let [a, b, c] = [
    //     new Vector3(-0.6, 0.9, -0.4),
    //     new Vector3(0, 0.9, 0.4),
    //     new Vector3(0.6, 0.9, -0.4),
    // ];
    //视点
    let e = new Vector3(0.0, 1.2, 0.6);
    //鼠标点
    let p = new Vector3(0.0, 0.3, 0.4);



    //三角形
    let obj01 = new Obj3D().default({
        program: program,
        array: [
            a.x, a.y, a.z,
            b.x, b.y, b.z,
            c.x, c.y, c.z,
        ],
        element: [0, 1, 2],
        mode: ['TRIANGLES'],
        color: [1, 0, 0, 1],
        pvM4: pvM4,
    });
    //坐标轴
    let obj02 = new Obj3D().default({
        program: program,
        array: [
            -10, 0, 0,
            10, 0, 0,
            0, 10, 0,
            0, -10, 0,
            0, 0, 10,
            0, 0, -10,
        ],
        element: [0, 1, 2, 3, 4, 5],
        mode: ['LINES'],
        color: [1, 1, 1, 1],
        pvM4: pvM4,
    });
    //视线点
    let obj03 = new Obj3D().default({
        program: program,
        array: [
            e.x, e.y, e.z
        ],
        pvM4: pvM4,
        color: [0, 1, 0, 1],
    });
    //鼠标点
    let obj04 = new Obj3D().default({
        program: program,
        array: [
            p.x, p.y, p.z
        ],
        pvM4: pvM4,
        color: [0, 0, 1, 1],
    });
    //视线
    let obj05 = new Obj3D().default({
        program: program,
        array: [
            e.x, e.y, e.z,
            -e.x, -e.y, -e.z,
        ],
        pvM4: pvM4,
        color: [1, 1, 1, 1],
        mode: ["LINES"],
    });

    scene.add(obj01);
    scene.add(obj02);
    scene.add(obj03);
    scene.add(obj04);
    // scene.add(obj05);

    draw();





    {
        //建立三角形
        let plane = new Plane().setFromCoplanarPoints(a, b, c);
        //视线方向
        let v = p.clone().sub(e).normalize();
        //法线
        let n = a.clone().sub(c).cross(a.clone().sub(b));
        //建立射线
        let ray = new Ray(e).lookAt(p);
        //用射线的intersectPlane()函数求交点
        let m = new Vector3();
        ray.intersectPlane(plane, m);
        // console.log(m.x.toFixed(5), m.y.toFixed(5), m.z.toFixed(5));

        //鼠标点
        let obj07 = new Obj3D().default({
            program: program,
            array: [
                m.x, m.y, m.z
            ],
            pvM4: pvM4,
            color: [1, 1, 1, 1],
        });
        scene.add(obj07);



        // var a1 = a.clone().sub(m).cross(c.clone().sub(a))
        // console.log(a1.dot(n))
        // var b1 = b.clone().sub(m).cross(a.clone().sub(b))
        // console.log(b1.dot(n))
        // var c1 = c.clone().sub(m).cross(b.clone().sub(c))
        // console.log(c1.dot(n))

        // console.log(m.clone().sub(a).cross(c.clone().sub(a)))
        // console.log(m.clone().sub(b).cross(a.clone().sub(b)))
        // console.log(m.clone().sub(c).cross(b.clone().sub(c)))

        console.log(m)
        console.log(lib.inTriangle3(m, [a, b, c]))

        let m1 = new Vector3();
        ray.intersectTriangle(
            a, b, c,
            true,
            m1
        )
        console.log(m1)
    }











    function draw() {
        scene.setUniform("u_PvM4", { value: pvM4.elements });
        scene.draw();
    }
</script>

</html>